<template>

         <div class="avatar-container">
            <p class="lu">登录</p>
            <p class="yong" >用户名：</p>
 <el-input class="in" v-model="input1" style="width: 240px" placeholder="请输入姓名" />
 <p class="ma">密码：</p>
 <el-input
 class="mi"
    v-model="input2"
    style="width: 240px"
    type="password"
    placeholder="请输入密码"
    show-password
  />
  <div class="xuan">
    <el-radio-group v-model="radio1">
      <el-radio value="1" size="large">男</el-radio>
      <el-radio value="2" size="large">女</el-radio>
    </el-radio-group>
</div>
    <el-button type="primary" round style="width: 270px; font-size: 15px;"class="zhu" ><router-link to="/shouye"><el-link type="deng" :plain="true" @click="open"><strong>登录</strong></el-link></router-link></el-button>
    <el-col :span="100"><router-link><el-link class="deng">立即注册</el-link></router-link></el-col>
</div>
 
    
</template>
<script setup>
import { ref } from 'vue'
const input1 = ref('')
const input2= ref('')
const radio1 = ref('1')

import { ElMessage } from 'element-plus'
const open = () => {
  ElMessage('登录成功')
}
</script>
<style scoped>
.avatar-container {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  width: 500px; /* 设置容器宽度 */
  height: 400px; /* 设置容器高度 */
  display: flex;
  /* justify-content: center; */
  /* align-items: center;  */
  margin-top:100px;
  margin-left: 380px;
  background-image: url('/public/images/beijing.jpg');
}
.lu{
    font-size: 25px;
    color: dodgerblue;
    text-align: center;
    margin-left: 230px;
    margin-top: 20px;
}
.yong{
    margin-top: 95px;
    margin-left: -200px;
}
.ma{ 
    margin-left: -300px;
    margin-top: 155px;
}
.in{
    margin-left: -5px;
    margin-top: 90px;
    width: 450px;
    height: 40px;
}
.mi{
    margin-left: 10px;
    margin-top: 150px;
    width: 100px;
    height: 40px;
}
.xuan{
    margin-left:-220px;
    margin-top: 200px;
}
.zhu{
    margin-left:-140px;
    margin-top: 260px;
}
.deng{
    margin-left:-165px;
    margin-top: 310px;
}
</style>